<template>
  <div class="home">
    <nav-bar>
      <span slot="center">购物街</span>
    </nav-bar>
    
    <tab-control :tabControlList="tabControlList"
                 @tabControlClick="tabControlClick"
                 v-show="isShowTab"
                 ref="tabControlBar"
                 class="tab-control-bar">
    </tab-control>
    
    <my-scroll class="scroll"
               @getScrollPosition="getScrollPosition"
               ref="myScroll" 
               @pullingUp="loadMore">
      <slideshow :imageList="imageList"
                 @slideshowLoad="slideshowLoad">
      </slideshow>
      
      <tab-control :tabControlList="tabControlList"
                   @tabControlClick="tabControlClick"
                   ref="tabControlMove">
      </tab-control>
      
      <goods-list :goodsList="goodsList[currentType].list"></goods-list>
    </my-scroll>
    
    <transition name="fade">
      <back-top @click.native="backTop"
                v-if="isShowBack">
      </back-top>
    </transition>
  </div>
</template>

<script>
  
  import NavBar from "@/components/common/NavBar.vue"
  import Slideshow from "@/components/common/Slideshow.vue"
  import TabControl from "@/components/content/TabControl.vue"
  import GoodsList from "@/components/common/goods-list/GoodsList.vue"
  import MyScroll from "@/components/common/MyScroll.vue"
  import BackTop from "@/components/content/BackTop.vue"

  import { imgLoadedMixin } from "../../common/mixin";

  import { goodsList, imageList, addGoods } from "@/data/homeData"

  export default {
    name: "Home",
    data() {
      return {
        addGoods: addGoods,
        scrollOffsetHeight: null,
        tabOffsetTop: null,
        currentPosition: null,
        imageList: imageList,
        tabControlList: ["流行","新款","精选"],
        currentType: "pop",
        goodsList: goodsList,
      }
    },
    components: {
      NavBar,
      Slideshow,
      TabControl,
      GoodsList,
      MyScroll,
      BackTop,
    },
    mixins: [imgLoadedMixin],
    mounted() {
      //获取滚动区域的高度
      this.scrollOffsetHeight = this.$refs.myScroll.$el.offsetHeight;

    },
    computed: {

      isShowTab() {
        return　-(this.currentPosition) >= this.tabOffsetTop;
      },

      isShowBack() {
        return -(this.currentPosition) >= this.scrollOffsetHeight;
      },

    },
    methods: {

      tabControlClick(index) {
        switch (index) {
          case 0: this.currentType = "pop"; break;
          case 1: this.currentType = "new"; break;
          case 2: this.currentType = "sell"; break;
        }
        this.$refs.tabControlBar.currentIndex = index;
        this.$refs.tabControlMove.currentIndex = index;
        // console.log(this.currentType);
      },
      
      slideshowLoad() {
        //获取tab-control-bar的offsetTop
        this.tabOffsetTop = this.$refs.tabControlMove.$el.offsetTop;
      },
      
      getScrollPosition(position) {
        //获取scroll的滚动距离（tab-control-move的移动距离）
        this.currentPosition = position.y;
        // console.log(position);
      },
      
      backTop() {
        this.$refs.myScroll.scrollTo(0, 0, 300);
        // console.log(this.$refs.myScroll.$el["offsetHeight"]);
      },
      
      loadMore() {
        this.goodsList[this.currentType].list.push(...this.addGoods);
        this.goodsList[this.currentType].page++;
        this.$refs.myScroll.finishPullUp();
      },

      // busOff() {
      //   this.$bus.$off("imgLoaded", this.myRefresh);
      //   console.log("sure");
      // }

    },

    activated() {
      this.$bus.$on("imgLoaded",this.myRefresh)
    },

    deactivated() {
      this.$bus.$off("imgLoaded", this.myRefresh)
    }
    
  }
</script>

<style scoped>
  .home {
    top: 0;
    bottom: 50px;
    right: 0;
    left: 0;
    position: absolute;
  }
  
  .nav-bar {
    background-color: #ff8198;
    color: white;
    font-weight: bold;
  }
  
  .tab-control-bar {
    z-index: 3;
    position: relative;
    background-color: white;
  }
  
  .scroll {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 44px;
    overflow: hidden;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
